<template>
  <el-container>
    <el-header>
      <el-steps :active="active" finish-status="success" align-center style="padding-top: 10px">
        <el-step title="添加课程基本信息"></el-step>
        <el-step title="创建课程大纲"></el-step>
        <el-step title="最终发布"></el-step>
      </el-steps>
    </el-header>
    <el-main>
      <component
        :is="step"
        @next="handleNext"
        @save-finish="handleSaveFinish"
        :courseId="courseId"
      />
    </el-main>
  </el-container>
</template>

<script>
import step1 from '@/views/edu/course/drawer/step1';
import step2 from '@/views/edu/course/drawer/step2';
import step3 from '@/views/edu/course/drawer/step3';
export default {
  name: 'add',
  components: {
    step1,
    step2,
    step3
  },
  data() {
    return {
      step: 'step1',
      active: 1,
      courseId: ''
    }
  },
  methods: {
    handleNext(val) {
      console.log(val)
      this.active += val;
      this.step = 'step' + this.active;
    },
    handleSaveFinish(id) {
      this.courseId = id
    }
  }
}
</script>